
/* 类选择器 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
}

.red {
  color: green;
}

/* 类选择器 */
.big-text {
  font-size: 30px;
}

/* id选择器 */
#name {
  font-size: 50px;
  color: blue;
  /* 子图粗细 */
  font-weight: bold;
  /* 字体倾斜 */
  font-style: normal;

  text-align: center;

  text-decoration: underline;

  /* 行高 如果有加px 适配高度，如果为数字 则为行高 字体大小的倍数 */
  line-height: 30px; 
}

/* 通配符选择器 */
* {
  color: blueviolet;
}

/**
 * 子选择器, 声明 div 中 嵌套的 span标签的颜色，无论嵌套多少层
 */
div span {
  color: red;
}

/**
 * 子代选择器, 值选择第一个嵌套层的span标签的颜色
 */
div > span {
  color: blue;
}

/**
 * 并集选择器，多个选择器样式相同
 */
div, p {
  color: green;
}

/**
 * 交集选择器 p 标签中包含 box 类名的样式
 */
p.box { 
  color: red;
}